<style>
    .tab-content > .chart {
        padding: 10px;
    }
</style>
<!-- /.row -->
<!-- Main row -->
<div style="padding: 2% 0 2% 0;background-color: #fff;">
    <form class="form-horizontal form-commonsearch nice-validator n-default n-bootstrap" novalidate="" method="post" action="" id="">
        <div style="overflow: hidden;">
            <div class="col-xs-5">
                <input type="hidden" class="form-control operate" data-name="createtime" value="RANGE" readonly="">
                <input type="text" class="form-control datetimerange" name="time_statistics" value="" id="time_statistics" data-index="12" onfocus="getdaterangepicker(form)" autocomplete="off" placeholder="日期筛选">
            </div>
            <div class="col-xs-3">
                <button type="button" id="statistics" class="btn btn-success" formnovalidate="">提交</button>
                <button type="reset" class="btn btn-default">重置</button>
            </div>
            <div class="col-xs-10">
                <p style="margin:10px 0 0 0;">当前美国时区:(-5:00),对应时间:<span id="time_statistics_usa">{$usatime}</span></p>
            </div>
        </div>
    </form>
</div>

<div class="row" style="margin-bottom:5px;">
    <!-- Left col -->
    <section class="col-lg-7 connectedSortable">

        <div class="nav-tabs-custom charts-custom">
            <!-- Tabs within a box -->
            <ul class="nav nav-tabs pull-right">
                <!--<li class="active"><a href="#line-chart" data-toggle="tab">折线图</a></li>-->
                <!--<li><a href="#area-chart" data-toggle="tab">区域图</a></li>-->
                <li class="pull-left header">ROI</li>
            </ul>
            <div class="tab-content no-padding">
                <!-- Morris chart - Sales -->
                <div class="chart tab-pane active" id="line-chart" style="position: relative; height: 300px;"></div>
                <!--<div class="chart tab-pane" id="area-chart" style="position: relative; height: 300px;"></div>-->
            </div>
        </div>
        <!-- solid sales graph -->
        <div class="box box-solid">
            <div class="box-header"><h3 class="box-title">销售额</h3>

                <div class="box-tools pull-right">
                </div>
            </div>
            <div class="box-body border-radius-none">
                <div class="chart" id="smoothline-chart" style="height: 250px;"></div>
            </div>
            <!-- /.box-body-->
            <div class="box-footer no-border">
                <div class="row">
                    <!--<div class="col-xs-12 text-center">-->
                        <!--<div class="knob-label">统计最近一周订单的趋势</div>-->
                    <!--</div>-->
                    <!-- ./col -->
                </div>
                <!-- /.row -->
            </div>
        </div>
        <!-- /.box -->
        <!-- Custom tabs (Charts with tabs)-->

    </section>
    <!-- /.Left col -->
    <section class="col-lg-5 connectedSortable">

        <!-- Map box -->
        <div class="box box-solid">
            <div class="box-header">
                <!-- tools box -->
                <div class="pull-right box-tools">
                </div>
                <!-- /. tools -->
                <h3 class="box-title">
                    毛利
                </h3>
            </div>
            <div class="box-body">
                <div id="simplebar-chart" style="height: 250px; width: 100%;"></div>
            </div>
            <!-- /.box-body-->
            <div class="box-footer no-border">
                <div class="row">
                    <!--<div class="col-xs-12 text-center">-->
                        <!--<div class="knob-label">统计最近一周销售排行</div>-->
                    <!--</div>-->
                    <!-- ./col -->
                </div>
                <!-- /.row -->
            </div>
        </div>
        <!-- /.box -->


        <div class="nav-tabs-custom charts-custom">
            <!-- Tabs within a box -->
            <ul class="nav nav-tabs pull-right">
                <!--<li><a href="#pie-chart" data-toggle="tab">饼图</a></li>-->
                <!--<li class="active"><a href="#bar-chart" data-toggle="tab">柱状图</a></li>-->
                <li class="pull-left header">销售额分配</li>
            </ul>
            <div class="tab-content no-padding">
                <!-- Morris chart - Sales -->
                <!--<div class="chart tab-pane" id="pie-chart" style="position: relative; height: 300px;"></div>-->
                <div class="chart tab-pane active" id="bar-chart" style="position: relative; height: 300px;"></div>
            </div>
        </div>
        <!-- /.nav-tabs-custom -->

    </section>
    <!-- right col -->
</div>
<!-- /.row (main row) -->

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
<script>
    function getdaterangepicker(form) {
        //绑定日期时间元素事件
        if ($(".datetimerange", form).size() > 0) {
            require(['bootstrap-daterangepicker'], function () {
                var ranges = {};
                ranges[__('Today')] = [Moment().startOf('day'), Moment().endOf('day')];
                ranges[__('Yesterday')] = [Moment().subtract(1, 'days').startOf('day'), Moment().subtract(1, 'days').endOf('day')];
                ranges[__('Last 7 Days')] = [Moment().subtract(6, 'days').startOf('day'), Moment().endOf('day')];
                ranges[__('Last 30 Days')] = [Moment().subtract(29, 'days').startOf('day'), Moment().endOf('day')];
                ranges[__('This Month')] = [Moment().startOf('month'), Moment().endOf('month')];
                ranges[__('Last Month')] = [Moment().subtract(1, 'month').startOf('month'), Moment().subtract(1, 'month').endOf('month')];
                var options = {
                    timePicker: false,
                    autoUpdateInput: false,
                    timePickerSeconds: true,
                    timePicker24Hour: true,
                    autoApply: true,
                    locale: {
                        format: 'YYYY-MM-DD HH:mm:ss',
                        customRangeLabel: __("Custom Range"),
                        applyLabel: __("Apply"),
                        cancelLabel: __("Clear"),
                    },
                    ranges: ranges,
                };
                var origincallback = function (start, end) {
                    $(this.element).val(start.format(this.locale.format) + " - " + end.format(this.locale.format));
                    $(this.element).trigger('blur');
                };
                $(".datetimerange", form).each(function () {
                    var callback = typeof $(this).data('callback') == 'function' ? $(this).data('callback') : origincallback;
                    $(this).on('apply.daterangepicker', function (ev, picker) {
                        callback.call(picker, picker.startDate, picker.endDate);
                    });
                    $(this).on('cancel.daterangepicker', function (ev, picker) {
                        $(this).val('').trigger('blur');
                    });
                    $(this).daterangepicker($.extend(true, options, $(this).data()), callback);
                });
            });
        }
    }
</script>
